import { useReducer } from 'react'

// 1. 定义 reducer 函数，根据不同的 action 类型，返回不同的 state
function reducer(state, action) {
	switch (action.type) {
		case 'INC':
			return state + 1
		case 'DEC':
			return state - 1
		case 'REST':
			return action.payload
		default:
			return state
	}
}

function UseReducer() {
	// 2. 组件中调用 useReducer 函数，传入 reducer 函数和初始 state，返回 state 和 dispatch 方法
	const [state, dispatch] = useReducer(reducer, 0) // 初始 state 为 0

	// 3. 在组件中，通过 dispatch 方法触发 action，并更新 state 值
	// 4. 在组件中，通过 state 展示数据

	return (
		<>
			<h2>UseReducer</h2>
			<hr />
			<p>当前计数：{state}</p>
			<button onClick={() => dispatch({ type: 'INC' })}>+1</button>
			<button onClick={() => dispatch({ type: 'DEC' })}>-1</button>
			<button onClick={() => dispatch({ type: 'REST', payload: 0 })}>重置（传参）</button>
		</>
	)
}

export default UseReducer
